<template>
    <div class="app-container">
        <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row stripe
            @selection-change="handleSelectionChange" id="tableList">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column label="姓名">
                <template slot-scope="{ row }"> {{ row.name }} </template>
            </el-table-column>

            <el-table-column label="联系方式">
                <template slot-scope="{ row }"> {{ row.phone }} </template>
            </el-table-column>

            <el-table-column label="Email">
                <template slot-scope="{ row }"> {{ row.email }} </template>
            </el-table-column>

            <el-table-column label="描述">
                <template slot-scope="{ row }"> {{ row.description }} </template>
            </el-table-column>

            <el-table-column sortable prop="createdAt" label="创建时间" align="center">
                <template slot-scope="{ row }">
                    <span>{{ row.createdAt | formatDate }}</span>
                </template>
            </el-table-column>

            <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{ row }">
                    <el-button v-if="row.status != 'deleted'" size="mini" type="danger" plain @click="handleDelete(row)">
                        {{ $t('table.delete') }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="el-table__footer">
            <el-button type="danger" plain :disabled="selectedRows.length <= 0" @click="handleDelete(selectedRows)">删除选中
            </el-button>
        </div>
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
    </div>
</template>
  
<script>
import { config } from './config'
import { fetchList, remove } from '@/api/contact'
import { formatDate, listToObject, baseHost } from '@/utils'
import Pagination from '@/components/Pagination'
let categoryList = {}
export default {
    name: 'ProductList',
    components: {
        Pagination,
    },
    filters: {
        statusFilter(status) {
            return status ? 'success' : 'info'
        },
        formatDate(date) {
            return formatDate(date)
        },
        categoryIDsToName(id) {
            console.log('categoryList', categoryList)
            let item = categoryList[id] || {}
            let name = item.name || ''

            return name
        },
    },
    data() {
        return {
            tableKey: 0,
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 10,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id',
                keyword: '',
            },
            downloadLoading: false,
            selectedRows: [],
        }
    },
    watch: {
        'listQuery.keyword'(value) {
            if (value.length <= 0) {
                this.getList()
            }
        },
    },
    async created() {
        await this.getList()
    },
    methods: {
        // 列表
        getList() {
            this.listLoading = true
            fetchList(this.listQuery).then((res) => {
                const { data = [], total = 0 } = res
                this.list = data.map((v) => {
                    return v
                })
                this.total = total
                this.listLoading = false
            })
        },
        // 删除
        handleDelete(row) {
            let ids = []
            if (Array.isArray(row)) {
                ids = row.map((v) => v.id)
            } else {
                ids.push(row.id)
            }

            this.handleClose(() => {
                remove({
                    ids,
                }).then(() => {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000,
                    })
                    this.getList()
                })
            })
        },

        handleSelectionChange(val) {
            this.selectedRows = val
        },

        // 删除提醒
        handleClose(done) {
            this.$confirm('确认删除？')
                .then(() => {
                    done()
                })
                .catch(() => { })
        },

        // filter
        onFilter() {
            this.listQuery.page = 1
            this.getList()
        },
    },
}
</script>
  